<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Example 1 - jFrame</title>

	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

	<!--[if lt IE 7]>
		<link rel="stylesheet" href="css/ie_lt_7.css" type="text/css" />
	<![endif]-->

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="javascripts_old/jquery.thickbox.js"></script>
	<script type="text/javascript" src="javascripts_old/jquery.cookie.js"></script>
	<script type="text/javascript" src="javascripts_old/survey.js"></script>
	

	<script type="text/javascript">
		$(document).ready(function() {
			$('body').addClass('js');
			
			//function to call survey 	
			$('li.loadSurvey').click(function() {
				$.survey('survey.html',
						  'jFrameSurvey1');
				return false;
			});
				
				
			//function to clear survey cookie for example
			$('li.clearCookie').click(function() {
					$.cookie('jFrameSurvey1', null, { expires: 30 });
					return false;
			});	
		});
	</script>

</head>
<body>

	<div id="wrapper" class="container_12 clear">

		<div class="column grid_12">
			<h1>Example 1 - <em>javascript the normal way</em></h1>
		</div>

		<div class="column grid_7">
			<p>This page will load up a survey from SurveyMonkey in a <a href="http://jquery.com/demo/thickbox/">thickbox</a>, the script will also add a cookie using <a href="http://plugins.jquery.com/project/cookie">jquery.cookie</a> to your computer so the survey will not load up again.</p>

			<p>Normally the survey would pop-up on page load but for this example use the <em>load survey link</em>, if you want to load the survey again, remember to clear the cookie.</p>

			<p>If you look at the source code you will see that we have added 4 javascript files in order to accomplish this.</p>

			<ul>
				<li class="loadSurvey"><a href="survey.html">Load the survey</a></li>
				<li class="clearCookie hideContent"><a href="#">Clear the cookie to load the survey again</a></li>
			</ul>
		</div>

		<div class="column grid_5 spotlight">
			<div>
				<h2>Uncoupling javascript from HTML</h2>
				<p>This example is from an article on uncoupling HTML and javascript using
					a jQuery script called jFrame.</p>
				
				<ul>
					<li><a href="../Documentation/How_to_use.html">Read the article: Uncoupling javascript from HTML</a></li>
				</ul>
				
				<h2>Examples</h2>
				<ul>
					<li><a href="example1.html">Example 1</a></li>
					<li><a href="example2.html">Example 2</a></li>
					<li><a href="example3.html">Example 3</a></li>
					<li><a href="example4.html">Example 4</a></li>
				</ul>
								
			</div>
		</div>
	</div>
</body>
</html>

